<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
	<head id="Head1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<%@ include file="/commons/listcssjs.jsp"%>
<script language="javascript">
 $(function(){
 alert(111);
	var gg = document.getElementById("img1");
	var ei = document.getElementById("large");
	gg.onmousemove = function(event){
		event = event || window.event;
		ei.style.display = "block";
		ei.innerHTML = '<img style="border:1px solid gray;" src="' + this.src + '" />';
		ei.style.top  = document.body.scrollTop + event.clientY + 12 + "px";
		ei.style.left = document.body.scrollLeft + event.clientX + 12 + "px";
	}
	gg.onmouseout = function(){
		ei.innerHTML = "";
		ei.style.display = "none";
	}	
	$("#f1").change(function(){
	    alert(444);
	    alert("file:///"+$("#f1").val());
		$("#img1").attr("src","file:///"+$("#f1").val());
	})
 });
</script>
<style type="text/css">
	#large{position:absolute;display:none;z-index:999;}
</style>
</head>

<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>